<template>
    <div id="homeheader">
        <div id='logo'>
            <div id="log1">
                <span class="iconfont icon-dianpu"></span>
            </div>
            <div id="log2">
                <span id="p1">蓝天西餐厅</span>
                <span id="p2">蓝天西餐厅旅游景点分店</span>
            </div>
        </div>
        <div id="search">
            <a-input v-model:value="value" placeholder="在这里搜索" @click="inputclick">
                <template #prefix>
                    <span class="iconfont icon-sousuo"></span>
                </template>
            </a-input>
        </div>
        <div id="user">
            <span class="iconfont icon-lingsheng ico"></span>
            <img src="https://img0.baidu.com/it/u=2528037528,3946444635&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1716656400&t=6049a0c201c1b6da7a101823ab42a61e"/>
            <div id="usershow">
                <span id="p1">小马哥</span>
                <span id="p2">服务员</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { watch, ref ,defineEmits , defineProps} from 'vue';
const value = ref<string>('');
watch(value, () => {
    console.log(value.value);
});
let props=defineProps({
    search:{
        type:Boolean,
        default:false
    }
})
let emit=defineEmits(['inputclick'])
let inputclick = () => {
    console.log('点击了输入框');
    emit('inputclick',!props.search)
}
</script>
<style lang="less" scoped>
#homeheader {
    width: 100%;
    height: 10vh;
    position: fixed;
    top: 0;
    background-color: #FFF;
    display: flex;
    justify-content: space-around;
    z-index: 10000;
    #logo {
        max-width: 33%;
        height: 100%;
        // background-color: #dfc4c4;
        display: flex;
        justify-content: space-around;
        align-items: center;

        #log1 .iconfont {
            font-size: 4vh;
            padding-right: 1vh;
            box-sizing: border-box;
        }
        #log2{
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction: column;
        }
        #log2 #p1 {
            font-size: 2vh;
            font-weight: bold;
        }

        #log2 #p2 {
            font-size: 1.5vh;
            color: #636566;
        }
    }

    #search {
        width: 30%;
        height: 100%;
        // background-color: #dad7d7;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #user {
        width: 30%;
        height: 100%;
        // background-color: #f82020;
        display: flex;
        justify-content: center;
        align-items: center;
        .ico{
            width: 15%;
        }
        img{
            width: 7vh;
            border-radius: 50%;

        }
        #usershow {
            width: 30%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            #p1{
                font-size: 2vh;
                font-weight: bold;
            }
            #p2{
                font-size: 1.5vh;
                color: #636566;
            }
        }
    }
}
</style>